<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>1.1-1运动动画js_demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      cursor: pointer;
    }
    #div1{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
      left: -200px;
      top: 0;
    }
    #div1 span{
      width: 20px;
      height: 50px;
      line-height: 25px;
      background: yellow;
      display: block;
      position: absolute;
      left: 200px;
      top: 75px;
    }
  </style>
  <script>
  window.onload = function(){
    var oDiv = document.getElementById("div1");
    oDiv.onmouseover = function(){
      startMove();
    }
    oDiv.onmouseout = function(){
      startMove1();
    }
  }
  var timer = null;
  function startMove(){
    clearInterval(timer);
    var oDiv = document.getElementById("div1");
    setInterval(function(){
      if(oDiv.offsetLeft==0){
        clearInterval(timer);
      }else{
        oDiv.style.left = oDiv.offsetLeft+10+'px';
      }
    },30);
  }
  function startMove1(){
    clearInterval(timer);
    var oDiv = document.getElementById("div1");
    setInterval(function(){
      if(oDiv.offsetLeft == -200 ){
        clearInterval(timer);
      }else{
        oDiv.style.left = oDiv.offsetLeft-10+'px';
      }
    },30);
  }
  </script>
  <body>
    <h4>运动框架实现思路</h4>
    <ul>
      <li>速度</li>
      <li>缓冲运动</li>
      <li>多物体运动</li>
      <li>任意值变化</li>
      <li>链式运动</li>
      <li>同时运动</li>
    </ul>
    <div id="div1">
      <span id="share">分享</span>
    </div>

  </body>
</html>
